import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import {
  Grid,
  Typography,
  Box,
  useTheme
} from '@mui/material';

// Icons
import CreditCardIcon from '@mui/icons-material/CreditCard';
import PaymentIcon from '@mui/icons-material/Payment';
import StarIcon from '@mui/icons-material/Star';

// Styled Components
import {
  StyledPaper,
  StyledAppButton
} from 'components/objects/StyledComponents';

/**
 * Payment Methods component that displays credit cards in grid view
 * 
 * @param {Object} props
 * @param {Array} props.cardsData - Array of credit card data objects
 * @param {Object} props.customerData - Customer data object with invoice settings
 * @param {boolean} props.enableCustomerPortal - Flag to enable/disable customer portal features
 * @param {Function} props.onRemoveCard - Function to handle card removal
 * @param {Function} props.onSetDefaultCard - Function to handle setting card as default
 * @param {Function} props.formatMoney - Utility function to format currency
 * @param {string} props.currency - Currency code
 */
const PaymentMethods = ({
  cardsData = [],
  customerData,
  enableCustomerPortal = false,
  onRemoveCard,
  onSetDefaultCard,
  formatMoney,
  currency = 'USD'
}) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const isDarkMode = theme.palette.mode === 'dark';

  const isDefaultCard = (cardData) => {
    if (!customerData?.invoice_settings?.default_payment_method) return false;
    
    const defaultId = typeof customerData.invoice_settings.default_payment_method === 'object'
      ? customerData.invoice_settings.default_payment_method.id
      : customerData.invoice_settings.default_payment_method;
    
    return cardData.id === defaultId;
  };

  return (
    <Grid item xs={12} md={6}>
      <StyledPaper darkMode={isDarkMode} sx={{ p: 3 }}>
        {/* Payment Methods Header */}
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
          <CreditCardIcon 
            color="primary" 
            sx={{ fontSize: 32, mr: 2 }}
          />
          <Typography variant="h5" component="h1">
            {t("dashboardPage.paymentMethods")}
          </Typography>
        </Box>

        {/* Credit Cards List */}
        <Box sx={{ mb: 3 }}>
          {cardsData.map((cardData, i) => (
            <Box 
              key={`card-${i}`}
              sx={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                py: 1.5,
                borderBottom: i < cardsData.length - 1 ? 
                  isDarkMode ? '1px solid rgba(255, 255, 255, 0.1)' : '1px solid rgba(0, 0, 0, 0.1)' : 
                  'none'
              }}
            >
              {/* Card Information */}
              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                <PaymentIcon 
                  sx={{ 
                    fontSize: 24,
                    transform: 'rotate(-45deg)',
                    mr: 2
                  }}
                />
                <Typography>
                  {cardData.card.brand} ... {cardData.card.last4}{" "}
                  <Typography component="span" color="text.secondary">
                    {cardData.card.exp_month}/{cardData.card.exp_year}
                  </Typography>
                </Typography>
                {isDefaultCard(cardData) && (
                  <StarIcon 
                    color="primary" 
                    sx={{ fontSize: 20, ml: 1 }}
                  />
                )}
              </Box>

              {/* Card Actions */}
              {!enableCustomerPortal && cardsData.length > 1 && (
                <Box sx={{ display: 'flex', gap: 1 }}>
                  {isDefaultCard(cardData) ? (
                    <StyledAppButton 
                      darkMode={isDarkMode}
                      disabled
                      size="small"
                      sx={{ minWidth: 'auto', px: 1 }}
                    >
                      {t("dashboardPage.default")}
                    </StyledAppButton>
                  ) : (
                    <>
                      <StyledAppButton
                        darkMode={isDarkMode}
                        onClick={() => onRemoveCard(cardData.id)}
                        color="error"
                        size="small"
                        sx={{ minWidth: 'auto', px: 1 }}
                      >
                        {t("dashboardPage.remove")}
                      </StyledAppButton>
                      <StyledAppButton
                        darkMode={isDarkMode}
                        onClick={() => onSetDefaultCard(cardData.id)}
                        size="small"
                        sx={{ minWidth: 'auto', px: 1 }}
                      >
                        {t("dashboardPage.default")}
                      </StyledAppButton>
                    </>
                  )}
                </Box>
              )}
            </Box>
          ))}
        </Box>

        {/* Add New Card Button */}
        {!enableCustomerPortal && (
          <Box sx={{ mt: 2 }}>
            <StyledAppButton 
              darkMode={isDarkMode}
              component={Link} 
              to="/card/add" 
              variant="outlined"
              sx={{ py: 1, maxWidth: { xs: '100%', sm: '50%' } }}
              fullWidth
            >
              {t("dashboardPage.addCreditCard")}
            </StyledAppButton>
          </Box>
        )}
      </StyledPaper>
    </Grid>
  );
};

export default PaymentMethods;